I have a simple Node/Express app made with Typescript. And eslint give me the error
Missing file extension "ts" for "./lib/env" import/extensions
Here is my .eslintrc file
{
"extends": [
"airbnb",
"plugin:@typescript-eslint/recommended",
"prettier",
"prettier/react",
"plugin:import/errors",
"plugin:import/warnings",
"plugin:import/typescript"
],
"parser": "@typescript-eslint/parser",
"plugins": ["@typescript-eslint", "prettier", "import"],
"settings": {
"import/extensions": [".js", ".jsx", ".ts", ".tsx"],
"import/parsers": {
"@typescript-eslint/parser": [".ts", ".tsx"]
},
"import/resolver": {
"typescript": {
"directory": "./tsconfig.json"
},
"node": {
"extensions": [".js", ".jsx", ".ts", ".tsx"]
}
}
},
"rules": {
"@typescript-eslint/indent": [2, 2],
"no-console": "off",
"import/no-unresolved": [2, { "commonjs": true, "amd": true }],
"import/named": 2,
"import/namespace": 2,
"import/default": 2,
"import/export": 2
}
}
I have installed eslint-plugin-import & eslint-import-resolver-typescript. And I cannot figure out why, I got that error.
I know this is late, but if you're extending the Airbnb rules you can use eslint-config-airbnb-typescript. Please refer to the project page for the latest instructions. Here's the gist of it as of March 2022:
Install
npm install -D eslint-config-airbnb-typescript
ESLint config file
using React - add 'airbnb-typescript' after 'airbnb'
extends: [
'airbnb',
+ 'airbnb-typescript'
]
without React - add 'airbnb-typescript/base' after 'airbnb-base'
extends: [
'airbnb-base',
+ 'airbnb-typescript/base'
]
set parserOptions.project to path of your tsconfig.json
{
extends: ['airbnb', 'airbnb-typescript'],
+ parserOptions: {
+ project: './tsconfig.json'
+ }
}
NOTE: Prior to August 2021, you would need to also do the following tasks. These instructions are remaining here for historical reference only. You should not need to do this any more.
First uninstall the old one and add the new one:
# uninstall whichever one you're using
npm uninstall eslint-config-airbnb
npm uninstall eslint-config-airbnb-base
# install the typescript one
npm install -D eslint-config-airbnb-typescript
Then update your ESlint config, remove the old Airbnb from the "extends" section and add the new one:
extends: ["airbnb-typescript"]
If you're like me trying to configure babel, legacy Javascript, and new typescript files and attempting to enable extension free imports on *.ts then I was running into this ESLint issue (where I also found below solution):
In addition to the rules config:
"rules": {
"import/extensions": [
"error",
"ignorePackages",
{
"js": "never",
"mjs": "never",
"jsx": "never",
"ts": "never",
"tsx": "never"
}
]
}
You also need an additional settings entry in your .eslintrc.js:
"settings": {
"import/extensions": [".js", ".mjs", ".jsx", ".ts", ".tsx"]
},
Good luck!